<template>
	<view class="ex-mall-tab-page" :class="[$themeClass('page-bg-color')]">
		<!-- 头部 -->
		<view class="ex-mall-header" :class="[$themeClass('header-bg-color')]">
			<!-- #ifdef MP-WEIXIN -->
			<view class="ex-mall-header-mp-weixin-fill" :class="[$themeClass('header-title-color')]">首页</view>
			<!-- #endif -->
			<view class="ex-mall-header-content">
				<view class="ex-mall-header-left">
					<view class="ex-mall-header-btn" :class="[$themeClass('header-btn-left-bg-color')]"
						@click="toSearch">
						<text class="ex-mall-header-btn-icon ri-search-line"
							:class="[$themeClass('header-btn-left-icon-color')]"></text>
					</view>
				</view>
				<view class="ex-mall-header-title" :class="[$themeClass('header-title-color')]">程序员小何的杂货铺</view>
				<view class="ex-mall-header-right">
					<view class="ex-mall-header-btn" :class="[$themeClass('header-btn-right-bg-color')]"
						@click="toFavorite">
						<text class="ex-mall-header-btn-icon ri-bookmark-line"
							:class="[$themeClass('header-btn-right-icon-color')]"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 轮播 -->
		<view class="carousel" :class="[$themeClass('block-bg-color')]">
			<swiper class="swiper" indicator-dots autoplay :interval="3000" circular>
				<swiper-item class="swiper-item" v-for="(x, xi) in carousels" :key="xi">
					<view class="carousel-item">
						<image class="img" :src="'http://39.107.96.20:8888/'+x.img_name"></image>
						<view class="show">
							<view class="word">
								<view class="w1">{{ x.title }}</view>
								<view class="w2">{{ x.introduce }}</view>
							</view>
							<view class="enter">
								<text class="icon ri-arrow-right-s-line"></text>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>

		<!-- 商品专栏 -->
		<view class="ex-mall-panel column" :class="[$themeClass('panel-bg-color')]" v-for="(x, xi) in columns"
			:key="xi">
			<view class="ex-mall-panel-title"
				:class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">{{ x.title }}</view>
				<view class="more">
					<text class="icon ri-more-2-fill"></text>
				</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
				<scroll-view scroll-x>
					<view class="column-list">
						<view class="item" v-for="(xx, xxi) in x.goods" :key="xxi"
							@click="$util.toLinkPage('/pages/goods/goods?id=' + xx.goods_id)">
							<view class="thumbnail">
								<image class="img" :src="'http://39.107.96.20:8888/'+xx.goods_big_logo" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" :class="[$themeClass('panel-title-color')]">
								<view class="title">{{ xx.goods_name }}</view>
								<view class="price">￥{{ xx.goods_price.toFixed(2) }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 商品专题 -->
		<view class="special" :class="[$themeClass('block-bg-color')]">
			<view class="item" v-for="(x, xi) in specials" :key="xi">
				<view class="thumbnail">
					<image class="img" :src="x.thumbnail_url" mode="aspectFill"></image>
				</view>
				<view class="word">
					<view class="title">{{ x.title }}</view>
					<view class="info">{{ x.quantity }}+ {{ x.info }}</view>
				</view>
				<view class="btn">前往专题</view>
			</view>
		</view>

		<!-- 推荐商品 -->
		<view class="ex-mall-panel list" :class="[$themeClass('panel-bg-color')]">
			<view class="ex-mall-panel-title"
				:class="[$themeClass('panel-title-bg-color'), $themeClass('panel-title-color')]">
				<view class="text">推荐</view>
			</view>
			<view class="ex-mall-panel-content" :class="[$themeClass('panel-content-bg-color')]">
				<view class="list-box">
					<view class="list-column left">
						<view class="item" v-for="(x, xi) in goods" :key="xi" v-if="(xi + 1) % 2 != 0"
							@click="$util.toLinkPage('/pages/goods/goods?id=' + x.goods_id)">
							<view class="thumbnail">
								<image class="img" :src="'http://39.107.96.20:8888/'+x.goods_big_logo" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" :class="[$themeClass('panel-title-color')]">
								<view class="title">{{ x.goods_name }}</view>
								<view class="price">￥{{ x.goods_price.toFixed(2) }}</view>
							</view>
						</view>
					</view>
					<view class="list-column right">
						<view class="item" v-for="(x, xi) in goods" :key="xi" v-if="(xi + 1) % 2 === 0"
							@click="$util.toLinkPage('/pages/goods/goods?id=' + x.id)">
							<view class="thumbnail">
								<image class="img" :src="'http://39.107.96.20:8888/'+x.goods_big_logo" mode="aspectFill"></image>
								<view class="btn favorite">
									<text class="icon ri-bookmark-line"></text>
								</view>
							</view>
							<view class="info" :class="[$themeClass('panel-title-color')]">
								<view class="title">{{ x.goods_name }}</view>
								<view class="price">￥{{ x.goods_price.toFixed(2) }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="loadmore" :class="[$themeClass('panel-content-bg-color'), $themeClass('panel-title-color')]">
			<view class="text" v-if="loadMoreState === 'loadmore'">上拉加载更多</view>
			<view class="text" v-else-if="loadMoreState === 'loading'">正在加载...</view>
			<view class="text" v-else-if="loadMoreState === 'nomore'">没有更多了</view>
		</view>
	</view>
</template>

<script>
let systemInfo = {}
import config from '@/config'
export default {
	data() {
		return {
			reachBottom: false,
			loadMoreState: 'loadmore',
			/* 轮播 */
			carousels: [],
			/* 专栏 */
			columns: [],
			/* 专题 */
			specials: [],
			/* 推荐 */
			goods: [],
			shopNewData:[],
			pagesize: 8,
			pagenum: 1,
		}
	},
	mounted() {
		this.getgoods();
		this.$emit('loaded', {
			name: 'index'
		})
	},
	//初始化加载getgoods方法
	onLoad() {
		this.getgoods();
	},
	methods: {
		getgoods() {
			uni.request({
				url: config.baseUrl + '/goods?pagenum=1&pagesize=8', //仅为示例，并非真实接口地址。
				method: 'get',
				header: {
					'Authorization': uni.getStorageSync('token')  //获取session中的token
				},
				success: (res) => {
					
					if(res.data.meta.status == 200){
						console.log(res.data.data.goods,'打印');
						this.shopNewData = res.data.data.goods
						this.getcarousels()
					} else if(res.data.meta.msg == '无效token') {
						uni.setStorageSync('token','')
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}
				},
				fail() {
					uni.navigateTo({
						url:'/pages/login/login'
					})
				}
			});
		},
		getcarousels(){
			uni.request({
				url: config.baseUrl + '/banner', //仅为示例，并非真实接口地址。
				method: 'get',
				header: {
					'Authorization': uni.getStorageSync('token')  //获取session中的token
				},
				success: (res) => {
					console.log(res.data.data,'打印');
					this.carousels = res.data.data
					this.load()
				}
			});
		},
		load() {
			console.log('index on load')
			systemInfo = uni.getSystemInfoSync()
			// this.carousels = [{
			// 	url: '',
			// 	title: '时尚创意家居',
			// 	info: '简约北欧风格创意家具新品',
			// 	link: ''
			// }, {
			// 	url: '',
			// 	title: '时尚创意家居',
			// 	info: '简约北欧风格创意家具新品',
			// 	link: ''
			// }, {
			// 	url: '',
			// 	title: '时尚创意家居',
			// 	info: '简约北欧风格创意家具新品',
			// 	link: ''
			// }]
			console.log(this.shopNewData,'打印');
			this.columns = [{
				title: '新品',
				goods: this.shopNewData
			}]

			this.specials = [{
				thumbnail_url: '',
				title: '管理系统',
				quantity: 50,
				info: '各种管理系统',
				link: ''
			}, {
				thumbnail_url: '',
				title: 'python机器学习',
				quantity: 50,
				info: '创意机器学习',
				link: ''
			}, {
				thumbnail_url: '',
				title: '有创新的系统',
				quantity: 50,
				info: '创信系统',
				link: ''
			}]

			this.getGoods()
		},
		show() {
			console.log('index on show')
			uni.setNavigationBarTitle({
				title: '首页'
			})
		},
		hide() {
			console.log('index on hide')
		},
		getGoods() {
			this.loadMoreState = 'loading'
			uni.request({
				url: config.baseUrl + `/goods?pagenum=${this.pagenum}&pagesize=${this.pagesize}`, //仅为示例，并非真实接口地址。
				method: 'get',
				header: {
					'Authorization': uni.getStorageSync('token')  //获取session中的token
				},
				success: (res) => {
					console.log(res.data.data.goods,'打印');
					this.goods =  this.goods.concat(res.data.data.goods)
					this.loadMoreState = 'loadmore'
					this.pagenum++
				}
			});
			// var data = [{
			// 	thumbnail_url: '/static/logo.png',
			// 	title: '原创设计瓶子',
			// 	price: 23.00
			// }, {
			// 	thumbnail_url: '/static/logo.png',
			// 	title: '原创设计瓶子',
			// 	price: 23.00
			// }, {
			// 	thumbnail_url: '/static/logo.png',
			// 	title: '原创设计瓶子',
			// 	price: 23.00
			// }, {
			// 	thumbnail_url: '/static/logo.png',
			// 	title: '原创设计瓶子',
			// 	price: 23.00
			// }]
			// setTimeout(() => {
			// 	this.goods = this.goods.concat(data)
			// 	this.loadMoreState = 'loadmore'
			// }, 1500)
		},
		scroll(e) {
			uni.createSelectorQuery().in(this).selectAll('.ex-mall-tab-page').boundingClientRect(rects => {
				var rect = rects[0]
				// console.log(rect.bottom, systemInfo.windowHeight)
				if (rect.bottom - systemInfo.windowHeight <= 50) {
					if (!this.reachBottom) {
						this.reachBottom = true
						this.loadMore()
					}
				} else {
					this.reachBottom = false
				}
			}).exec()
		},
		loadMore() {
			console.log('index load more')
			if (this.loadMoreState === 'loadmore') {
				this.getGoods()
			}
		},
		toSearch() {
			this.$switchTab('search')
		},
		toFavorite() {
			uni.navigateTo({
				url: '/pages/favorite/favorite'
			})
		}
	}
}
</script>

<style lang="scss">
.carousel {
	width: 100%;
	height: 48vw;
	margin: 0 auto;
	padding-top: 12px;

	&>.swiper {
		width: 100%;
		height: 100%;

		.swiper-item {
			padding: 0 28px;
			box-sizing: border-box;

			&:nth-child(3n-2) {
				.carousel-item {
					&>.img {
						background-color: #784B32;
					}
				}
			}

			&:nth-child(3n-1) {
				.carousel-item {
					&>.img {
						background-color: #9B927D;
					}
				}
			}

			&:nth-child(3n) {
				.carousel-item {
					&>.img {
						background-color: #96824C;
					}
				}
			}
		}

		.carousel-item {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 12px;
			overflow: hidden;

			&>.img {
				display: block;
				width: 100%;
				height: 100%;
			}

			&>.show {
				position: absolute;
				right: 20px;
				bottom: 30px;
				left: 20px;
				display: flex;

				&>.word {
					flex: 1;

					&>.w1 {
						font-size: 16px;
						font-weight: 500;
						color: #FFFFFF;
					}

					&>.w2 {
						margin-top: 10px;
						font-size: 14px;
						color: #FFFFFF;
					}
				}

				&>.enter {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 38px;
					height: 38px;
					background-color: #FFFFFF;
					border-radius: 12px;

					&>.icon {
						font-size: 22px;
						color: #292929;
					}
				}
			}
		}
	}
}

.ex-mall-panel.column {
	padding-top: 32px;

	.ex-mall-panel-content {
		.column-list {
			display: flex;
			align-items: flex-start;

			&>.item {
				padding: 0 16px 24px 0;

				&:first-child {
					padding-left: 28px;
				}

				&:last-child {
					padding-right: 28px;
				}

				&:nth-child(odd) {
					&>.thumbnail {
						&>.img {
							background-color: #0EAA90;
						}
					}
				}

				&:nth-child(even) {
					&>.thumbnail {
						&>.img {
							background-color: #F8E3DC;
						}
					}
				}

				&>.thumbnail {
					position: relative;

					&>.img {
						position: relative;
						z-index: 1;
						display: block;
						// width: 188px;
						// height: 218px;
						width: 154px;
						height: 200px;
						border-radius: 12px;
					}

					&>.btn {
						position: absolute;
						top: 14px;
						right: 14px;
						z-index: 10;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 28px;
						height: 28px;
						border-radius: 9px;
						background-color: #FFFFFF;

						&.favorite {
							&>.icon {
								font-size: 15px;
								color: #292929;
							}
						}
					}
				}

				&>.info {
					line-height: 1;

					&>.title {
						margin-top: 20px;
						line-height: 1.3;
						font-size: 15px;
						font-weight: 600;
					}

					&>.price {
						margin-top: 10px;
						font-size: 13px;
					}
				}
			}
		}
	}
}

.special {
	padding: 28px;

	&>.item {
		position: relative;
		width: calc(100vw - (28px * 2));
		height: calc(100vw - (28px * 2));
		margin-top: 28px;

		&:first-child {
			margin-top: 0;
		}

		&:nth-child(3n-2) {
			&>.thumbnail {
				&>.img {
					background-color: #98847D;
				}
			}
		}

		&:nth-child(3n-1) {
			&>.thumbnail {
				&>.img {
					background-color: #A06441;
				}
			}
		}

		&:nth-child(3n) {
			&>.thumbnail {
				&>.img {
					background-color: #645E66;
				}
			}
		}

		&>.thumbnail {
			width: 100%;
			height: 100%;

			&>.img {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 12px;
			}
		}

		&>.word {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;

			&>.title {
				font-size: 29px;
				font-weight: 700;
				color: #FFFFFF;
			}

			&>.info {
				margin-top: 12px;
				font-size: 14px;
				color: #FFFFFF;
			}
		}

		&>.btn {
			position: absolute;
			bottom: 38px;
			left: 50%;
			transform: translateX(-50%);
			width: 146px;
			height: 58px;
			text-align: center;
			line-height: 58px;
			font-size: 14px;
			font-weight: 500;
			color: #292929;
			background-color: #FFFFFF;
			border-radius: 12px;
		}
	}
}

.ex-mall-panel.list {
	.ex-mall-panel-content {
		.list-box {
			display: flex;

			.list-column {
				flex: 1;

				&.left {
					padding: 0 6px 0 28px;

					&>.item {
						&:nth-child(odd) {
							&>.thumbnail {
								&>.img {
									background-color: #0EAA90;
								}
							}
						}

						&:nth-child(even) {
							&>.thumbnail {
								&>.img {
									background-color: #F8E3DC;
								}
							}
						}
					}
				}

				&.right {
					padding: 0 28px 0 6px;

					&>.item {
						&:nth-child(odd) {
							&>.thumbnail {
								&>.img {
									background-color: #A8A8A9;
								}
							}
						}

						&:nth-child(even) {
							&>.thumbnail {
								&>.img {
									background-color: #7F8688;
								}
							}
						}
					}
				}

				&>.item {
					width: 100%;
					padding-bottom: 24px;

					&>.thumbnail {
						position: relative;

						&>.img {
							position: relative;
							z-index: 1;
							display: block;
							width: 100%;
							height: 53vw;
							border-radius: 12px;
						}

						&>.btn {
							position: absolute;
							top: 14px;
							right: 14px;
							z-index: 10;
							display: flex;
							justify-content: center;
							align-items: center;
							width: 28px;
							height: 28px;
							border-radius: 9px;
							background-color: #FFFFFF;

							&.favorite {
								&>.icon {
									font-size: 15px;
									color: #292929;
								}
							}
						}
					}

					&>.info {
						line-height: 1;

						&>.title {
							margin-top: 20px;
							line-height: 1.3;
							font-size: 15px;
							font-weight: 600;
						}

						&>.price {
							margin-top: 10px;
							font-size: 13px;
						}
					}
				}
			}
		}
	}
}

.loadmore {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 78px;

	&>.text {
		font-size: 14px;
		font-weight: 600;
	}
}
</style>
